<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <a class="layui-btn layui-btn-sm" href="<?php echo \yii\helpers\Url::to(['index']) ?>" ><i class="layui-icon layui-icon-left"></i>返回</a>
    </div>
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">任务名称：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $campaign['name']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">计划日期：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $campaign['datetime_init']; ?> - <?php echo $campaign['datetime_end']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">计划时间：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $campaign['daytime_init']; ?> - <?php echo $campaign['daytime_end']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">中继：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $campaign['trunk']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">队列：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $campaign['queue']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">配置：</label>
                        <div class="layui-form-mid layui-word-aux">重试次数：<?php echo $campaign['retries']; ?>，并发：<?php echo $campaign['max_canales']; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">呼叫总数：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $total; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">已呼叫：</label>
                        <div class="layui-form-mid layui-word-aux"><?php echo $hasCall; ?></div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">进度：</label>
                        <div class="layui-input-inline" style="padding-top:10px">
                            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                <div class="layui-progress-bar layui-bg-black" lay-percent="<?php echo $percent; ?>"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space10">
    <div class="layui-card">
        <div class="layui-card-header"><b>转接统计</b></div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-xs12">
                    <div id="exten_bar" style="width: 100%;height: 400px"></div>
                </div>
                <div class="layui-col-xs12">
                    <div>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>分机号</th>
                                <th>呼叫数</th>
                                <th>接通数</th>
                                <th>接通率</th>
                                <th>累计时长</th>
                                <th>平均时长（秒）</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($extens as $k=>$exten){ ?>
                                <tr>
                                    <td><?php echo $k; ?></td>
                                    <td><?php echo $exten['total']; ?></td>
                                    <td><?php echo $exten['success']; ?></td>
                                    <td><?php echo $exten['percent']; ?></td>
                                    <td><?php echo $exten['times_formate']; ?></td>
                                    <td><?php echo $exten['times_avg']; ?></td>
                                </tr>
                            <?php } ?>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space10">
    <div class="layui-col-xs4">
        <div class="layui-card">
            <div class="layui-card-header"><b>呼叫结果</b></div>
            <div class="layui-card-body">
                <div id="result_pie" style="width: 100%;height: 400px"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs8">
        <div class="layui-card">
            <div class="layui-card-header"><b>呼叫记录</b></div>
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
                <script type="text/html" id="options">
                    {{#  if(d.billsec>0&&d.disposition=='ANSWERED'&&d.recordingfile){ }}
                    <a href="{{d.play_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-play"></i>播放</a>
                    <a href="{{d.download_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-download-circle"></i>下载</a>
                    {{#  } }}
                </script>
            </div>
        </div>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['calls','id'=>$campaign['id']]);

$js = <<<JS
    layui.config({
        version: '1535898708509' //为了更新 js 缓存，可忽略
    }).extend({
        echarts: 'lib/extend/echarts' ,
        echartsTheme: 'lib/extend/echartsTheme' ,
    }).use(['form','element','table', 'layer','upload','echarts','echartsTheme'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        var upload = layui.upload;
        var echarts = layui.echarts;  
        var echartsTheme = layui.echartsTheme;  
        
        //转接统计
        var exten_bar = echarts.init(document.getElementById('exten_bar'),echartsTheme)
        exten_bar.setOption({
            title: {text: "", subtext: ""},
            tooltip: {trigger: "axis"},
            legend: {data: [{$bar_data['label']}]},
            calculable: !0,
            xAxis: [{
                type: "category",
                data: [{$bar_data['xAxis']}]
            }],
            yAxis: [{type: "value"}],
            series: [{
                name: "呼叫数",
                type: "bar",
                data: [{$bar_data['total']}],
                markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            },{
                name: "接通数",
                type: "bar",
                data: [{$bar_data['success']}],
                markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            }]
        });
        window.onresize = exten_bar.resize
        
        //呼叫结果
        var result_pie = echarts.init(document.getElementById('result_pie'),echartsTheme)
        result_pie.setOption({
            title: {text: "任务呼出情况", x: "center", textStyle: {fontSize: 14}},
            tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
            legend: {orient: "vertical", x: "left", data: [{$pie_data['label']}]},
            series: [{
                name: "呼出",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: {$pie_data['data']}
            }]                
        });
        window.onresize = result_pie.resize
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: '400px'
            ,url: '{$url}' 
            ,page: true 
            ,cols: [[
                {field: 'phone', title: '号码',width:120}
                ,{field: 'status', title: '状态',width:80}
                ,{field: 'datetime_originate', title: '呼叫时间'}
                ,{field: 'fecha_llamada', title: '接通时间'}
                ,{field: 'datetime_entry_queue', title: '入队列时间'}
                ,{field: 'end_time', title: '挂断时间'}
                ,{field: 'duration_wait', title: '通话时长（秒）'}
            ]]
        });
    });
JS;
$this->registerJs($js);
